<template>
  <el-row class="word-container" gutter={20}>
    <!-- 使用 v-for 循环渲染文本列表 -->
    <el-col
        v-for="(item, index) in words"
        :key="index"
        :span="24"
        class="word-item"
    >
      {{ item }}
    </el-col>
  </el-row>
</template>

<script>
import { defineComponent } from 'vue';
import { ElRow, ElCol } from 'element-plus';

export default defineComponent({
  name: 'Word',
  components: {
    ElRow,
    ElCol
  },
  data() {
    return {
      // 静态文本数据
      words: [
        '文本1',
        '文本2',
        '文本3',
        '文本4',
        '文本5'
      ]
    };
  }
});
</script>

<style scoped>
.word-container {
  width: 100%; /* 容器宽度 */
  height: 100%; /* 容器宽度 */
  padding: 20px; /* 内边距 */
  border: 1px solid #ccc; /* 边框样式 */
  border-radius: 8px; /* 圆角边框 */
  background-color: #f9f9f9; /* 背景颜色 */
}

.word-item {
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  text-align: center; /* 文本居中 */
  padding: 10px; /* 内边距 */
  background-color: #e0e0e0; /* 背景颜色 */
  border-radius: 4px; /* 圆角边框 */
}
</style>